<template>
  <a-modal :visible="visible" :title="title" width="65vw" :top="80" :align-center="false" unmount-on-close @cancel="close">
    <div style="width: 100%; overflow-x: hidden">
      <a-alert>临时占用会对账号状态和同步库存状态都为开启的渠道账号进行库存的占用。</a-alert>
      <br />
      <page-form :model="form" layout="vertical" div="true" class="page-form" ref="formRef">
        <page-form-item
          field="dateRange"
          label="占用时间"
          size="1"
          required
          :rules="[{ required: true, message: '请选择', trigger: 'change' }]"
        >
          <i-range-picker
            v-model="form.dateRange"
            showTime
            :timePickerProps="{
              defaultValue: ['00:00:00', '23:59:59'],
            }"
            :disabledDate="(current) => dayjs(current).isBefore(dayjs().startOf('day'))"
          />
        </page-form-item>
        <page-form-item field="remark" label="占用原因" size="1">
          <a-textarea placeholder="请输入" v-model="form.remark" :max-length="100" show-word-limit />
        </page-form-item>
      </page-form>
      <div class="h-block">
        <a-descriptions layout="inline-horizontal" :column="1">
          <a-descriptions-item label="车牌号">{{ platoonCarInfo.licenseNo }}</a-descriptions-item>
          <a-descriptions-item label="车型">{{ platoonCarInfo.modelName }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>

    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" :loading="okLoading" @click="handleSubmit">确认</a-button>
    </template>
  </a-modal>
  <!-- 排车周期校验 -->
  <PlatoonCarCheckModal ref="platoonCarCheckModalRef" />
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import { ref, inject } from 'vue'
  import { addTempUseApi } from '@/api/asset/carStock'
  import { Message } from '@arco-design/web-vue'

  // 加载数据
  const loadDataFn = inject('loadDataFn') as Function
  // 模态框显示
  const title = '临时占用'
  const visible = ref(false)

  const platoonCarInfo = ref({
    startDate: undefined,
    carId: undefined,
    modelName: undefined,
    licenseNo: undefined,
  })
  const form = ref({
    carId: 0,
    dateRange: [],
    remark: '',
  })
  // 开启
  const open = (data: any) => {
    platoonCarInfo.value = data
    form.value = {
      carId: data.carId,
      dateRange: [],
      remark: '',
    }
    visible.value = true
  }
  // 关闭
  const close = () => {
    visible.value = false
  }

  // 排车校验
  const platoonCarCheckModalRef = ref()
  const formRef = ref()
  const okLoading = ref(false)
  const handleSubmit = () => {
    formRef.value.validate((error: any) => {
      if (!error) {
        if (form.value.dateRange[0] == form.value.dateRange[1]) {
          Message.warning('开始时间和结束时间不能相同')
          return
        }
        platoonCarCheckModalRef.value.confirm({
          title: '请确认是否临时占用？',
          submitBtnLoading: okLoading,
          params: {
            refId: undefined,
            startTime: form.value.dateRange[0],
            endTime: form.value.dateRange[1],
            useType: 11,
            carId: platoonCarInfo.value.carId,
          },
          onOk: (successCb: any) => {
            const params = {
              ...form.value,
              fromTime: form.value.dateRange[0],
              toTime: form.value.dateRange[1],
            }
            addTempUseApi(params)
              .then(() => {
                Message.success('临时占用成功')
                loadDataFn()
                close()
              })
              .finally(() => {
                successCb()
              })
          },
        })
      }
    })
  }

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .h-block {
    padding: 16px;
    background: rgba(247, 248, 250, 0.5);
  }

  .order-info-item {
    .custom-tag {
      margin-right: 8px;
      margin-bottom: 10px;
    }
  }
  .order-info-item + .order-info-item {
    margin-top: 10px;
  }

  .link-wrapper {
    font-size: 14px;
    .text-link {
      color: rgb(var(--primary-6));
      cursor: pointer;
      &.no-link {
        color: #1d2129;
        cursor: inherit;
      }
    }
    .text-link + .text-link {
      margin-top: 6px;
    }
  }

  .content-item {
    .content-item-name {
      margin-bottom: 4px;
      .staff-can-click {
        color: rgb(var(--primary-6));
        cursor: pointer;
      }
      .tag-pickup {
        padding: 0 3px;
        line-height: 18px;
      }
      :deep(.custom-tag) {
        margin-right: 6px;
        position: relative;
        top: 1px;
      }
    }
    .content-item-tag :deep(.custom-tag.default) {
      line-height: 20px;
      padding: 4px 8px;
    }
  }
  .content-item + .content-item {
    margin-top: 10px;
  }
</style>
